<template>
    <view v-for="(item, index) in selectTabList" :key="index"
          :class="`card`" @click="tabItem(item)">
        <div :value="item.value" icon="none">
            <div class="p-3px m-w-max-content">
                <SvgIcon :name="item.svgIcon" class="m-auto tab-svg-fill" :size="item.svgSize"/>
                <div class="label-text">{{ item.label }}</div>
            </div>
        </div>
    </view>

    <t-popup v-model="showColor" placement="bottom" class="pop" :style="{height:'400px',borderTop:'1px solid #ddd'}"
             destroy-on-close
             :showOverlay="false">
        <div>
            <div class="block">

                <t-navbar title="标题文字" :fixed="false">
                    <template #left>
                    </template>
                    <template #title>
                        <t-tabs v-model="editTab" theme="card" style="width: 100%" :spaceEvenly="false">
                            <t-tab-panel value="text" label="文字"></t-tab-panel>
                            <t-tab-panel value="style" label="样式"/>
                            <!-- <t-tab-panel value="font" label="字体"></t-tab-panel> -->
                            <!-- <t-tab-panel value="color" label="颜色"/> -->
                        </t-tabs>
                    </template>
                    <template #right>
                        <t-icon name="check" size="24px" @click="showColor = false" style="color:var(--themeColor)"/>
                    </template>
                </t-navbar>
            </div>
            <div class="text-box" v-if="editTab==='text'">
                <t-textarea v-bind="text" placeholder="请输入文字" :maxlength="500" indicator autofocus
                            :style="{height:'100%'}"></t-textarea>
            </div>
              <div class="color-box p-t-10px" v-if="editTab==='color'">
                  <div class="color-list-box bg-white">
                      <div>
                          <t-radio-group class="horizontal-box" :value="fill.modelValue">
                              <view v-for="(item, index) in colorList" :key="index"
                                    :class="`card ${fill.modelValue == item.value ? 'card--active' : ''}`">
                                  <t-icon v-if="fill.modelValue == item.value" name="check" class="card__icon"/>
                                  <t-avatar
                                          v-if="item.value === 'transparent'"
                                          shape="round"
                                          class="transparent-bg"
                                          @click="addFill(item.value)"
                                  >{{ item.label }}
                                  </t-avatar>
                                  <t-avatar
                                          v-else
                                          shape="round"
                                          :style="{background: item.value,...item.style}"
                                          :class="item.value === 'transparent'?'transparent-bg':''"
                                          @click="addFill(item.value)"
                                  >{{ item.label }}
                                  </t-avatar>
                              </view>
                          </t-radio-group>
                      </div>

                  </div>
                  <div >
                      <div style="height: 278px;overflow-y: scroll">
                        {{ fillArray }}
                          <t-cell-group bordered>
                              <t-cell v-for="(item,index) in fillArray" :key="'c_'+index" :value="index">
                                  <template #title>
                                      <div class="flex w-full flex-items-center">
                                          <div class="flex-1 transparent-bg">
                                              <div class="color-bar w-full" style="" :style="{backgroundColor:item.color}"></div>
                                          </div>
                                          <div v-if="fillArray.length>1" class="p-5px flex flex-items-center" @click.stop="removeFill(index)">
                                              <t-icon class="cursor-pointer danger-color" name="close-circle" size="18px"></t-icon>
                                          </div>
                                      </div>
                                  </template>
                              </t-cell>
                          </t-cell-group>
                      </div>
                  </div>
              </div>
            <div class="text-box p-t-10px" v-if="editTab==='style'">
                <div class="bg-white">
                    <div class="title-block">字号</div>
                    <t-slider v-bind="fontSize" :default-value="23"/>
                </div>
                <div class="bg-white">
                    <div class="title-block m-t-10px">样式</div>
                    <div>
                        <div class="toolbar-div">
                            <div class="flex-box">
                                <div class="tag-item">
                                    <t-check-tag v-bind="italic" size="large" variant="light" theme="primary">
                                        <t-icon name="textformat-italic"></t-icon>
                                    </t-check-tag>
                                </div>
                                <div class="tag-item">
                                    <t-check-tag :checked="textDecoration.modelValue === 'delete'"
                                                 @click="changeTextDecoration('delete')" size="large" variant="light"
                                                 theme="primary">
                                        <t-icon name="textformat-strikethrough"></t-icon>
                                    </t-check-tag>
                                </div>
                                <div class="tag-item">
                                    <t-check-tag :checked="textDecoration.modelValue === 'under'"
                                                 @click="changeTextDecoration('under')" size="large" variant="light"
                                                 theme="primary">
                                        <t-icon name="textformat-underline"></t-icon>
                                    </t-check-tag>
                                </div>
                            </div>
                        </div>
                        <div class="toolbar-div">
                            <div class="flex-box">
                                <div class="tag-item">
                                    <t-check-tag :checked="textAlign.modelValue === 'left'"
                                                 @click="textAlign.onChange('left')" size="large" variant="light"
                                                 theme="primary">
                                        <t-icon name="format-vertical-align-left"></t-icon>
                                    </t-check-tag>
                                </div>
                                <div class="tag-item">
                                    <t-check-tag :checked="textAlign.modelValue === 'center'"
                                                 @click="textAlign.onChange('center')" size="large" variant="light"
                                                 theme="primary">
                                        <t-icon name="format-vertical-align-center"></t-icon>
                                    </t-check-tag>
                                </div>
                                <div class="tag-item">
                                    <t-check-tag :checked="textAlign.modelValue === 'right'"
                                                 @click="textAlign.onChange('right')" size="large" variant="light"
                                                 theme="primary">
                                        <t-icon name="format-vertical-align-right"></t-icon>
                                    </t-check-tag>
                                </div>
                            </div>
                        </div>
                        <div class="toolbar-div">
                            <div class="flex-box">
                                <div class="tag-item" v-for="(item,index) in weightOptions">
                                    <t-check-tag :checked="fontWeight.modelValue === item.value"
                                                 @click="fontWeight.onChange(item.value)" :key="index" size="large"
                                                 variant="light" theme="primary">
                                        <div>
                                            {{ item.label }}
                                        </div>
                                    </t-check-tag>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="font-box" v-if="editTab==='font'">
                <div>
                    <!-- <div class="p-10px">
                        <t-search
                                v-model="fontSearchKeyword"
                                placeholder="输入字体名称搜索"
                                @change="onSearchFont"
                                @clear="onSearchFont"
                                size="mini"
                        >
                        </t-search>
                    </div> -->
                    <div class="van-list fonts">
                        <div class="font" v-for="(item,index) in fontList"
                             :key="index"
                             :class="{'active':fontFamily.modelValue === item.fontCode}"
                             @click="changeFontFamily(item,index)">
                             {{ item.fontName }}
                            <!-- <img :src="item.preview" :alt="item.fontName" style="color:#000;"> -->
                            <div class="loaded" v-show="!item.loaded">
                                <t-icon name="cloud-download" class=" "></t-icon>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </t-popup>
</template>

<script setup lang="ts">
import SvgIcon from "@/components/svgIcon/svgIcon.vue";
import {useActiveObjectModel} from "@/views/Editor/hooks/useActiveObjectModel";
import {useFontStore} from "@/store";
import FontFaceObserver from "fontfaceobserver";
import {Toast} from "tdesign-mobile-vue";
import {useEditor} from "@/views/Editor/app";
import {parseStrokeOrFill} from "@/views/Editor/utils/jsonParse";

const {editor, keybinding} = useEditor()
const {fontList, skipLoadFonts} = storeToRefs(useFontStore())
const selectTabList = [
    {label: '编辑', value: 'edit', svgIcon: 'iconfont-color-text', svgSize: 24},
]
const product = {
    value: 'all',
    options: [
        {
            value: 'all',
            label: '全部产品',
        },
        {
            value: 'new',
            label: '最新产品',
        },
        {
            value: 'hot',
            label: '最火产品',
        },
    ],
};
const text = useActiveObjectModel('text')
const fill = useActiveObjectModel('fill')
const fontFamily = useActiveObjectModel('fontFamily')
const fontSize = useActiveObjectModel('fontSize') // 字号
const textWrap = useActiveObjectModel('textWrap') // 文本换行规则
const lineHeight = useActiveObjectModel('lineHeight') // 行号
const letterSpacing = useActiveObjectModel('letterSpacing') // 字距
const textAlign = useActiveObjectModel('textAlign')
const verticalAlign = useActiveObjectModel('verticalAlign')
const italic = useActiveObjectModel('italic') // 文字是否倾斜
const textDecoration = useActiveObjectModel('textDecoration')
const textOverflow = useActiveObjectModel('textOverflow')
const fontWeight = useActiveObjectModel('fontWeight')
const colorList = [
    // {label: '透明', value: 'transparent',style: {}},
    {label: '', value: '#ffffff',style:{border: '1px solid #d3d3d3'}},
    {label: '', value: '#dfc672',style: {}},
    // {label: '', value: 'rgb(0,22,255)',style: {}},
    // {label: '', value: 'rgb(170,1,255)',style: {}},
    // {label: '', value: 'rgb(0,133,255)',style: {}},
    // {label: '', value: 'rgb(240,2,255)',style: {}},
    // {label: '', value: 'rgb(125,255,0)',style: {}},
    // {label: '', value: 'rgb(255,64,1)',style: {}},
    // {label: '', value: 'yellow'},
];

const weightOptions = [
    // {
    //     value: 'thin',
    //     label: '极细',
    // },
    // {
    //     value: 'extra-light',
    //     label: '特细',
    // },
    {
        value: 'light',
        label: '细',
    },
    {
        value: 'normal',
        label: '正常',
    },
    // {
    //     value: 'medium',
    //     label: '中等',
    // },
    // {
    //     value: 'semi-bold',
    //     label: '半粗',
    // },
    {
        value: 'bold',
        label: '加粗',
    },
    // {
    //     value: 'extra-bold',
    //     label: '特粗',
    // },
]
const showColor = ref(false)
const editTab = ref('text')
const fontSearchKeyword = ref('')
const fillArray = ref([])
watchEffect(() => {
    if (fill.value.modelValue) {
      console.log(fill.value.modelValue,44444)
        fillArray.value = parseStrokeOrFill(fill.value.modelValue)
    } else {
        fillArray.value = []
    }
})
const refreshFill = () => {
    fill.value.onChange([])
    fill.value.onChange(fillArray.value.length <= 0 ? [] : fillArray.value)
}
const addFill = (color:string) => {
    fillArray.value.push({
        type: 'solid',
        color: color,
    })
    refreshFill()
}
const removeFill = (index) => {
    fillArray.value.splice(index, 1)
    refreshFill()
}
const tabItem = (item: any) => {
    if (item.value === 'edit') {
        showColor.value = true
    }
}
const onSearchFont = () => {
    useFontStore().searchFont(fontSearchKeyword.value)
}
const onSearchFontActionClick = () => {
    useFontStore().searchFont(fontSearchKeyword.value)
}


const changeFontFamily = (record: any, index) => {
    const fontFamilyName = record.fontName
    const fontCode = record.fontCode
    // 字体加载
    Toast({
        theme: 'loading',
        message: `正在加载字体 【${fontFamilyName}】`,
        onClose: () => {
            console.log('onClose');
        },
        onDestroy: () => {
            console.log('onDestroy');
        },
    });
    const font = new FontFaceObserver(fontCode);
    font
        .load(null, 150000)
        .then(() => {
            fontList.value[index]['loaded'] = true
            fontFamily.value.onChange(fontCode);
            Toast.clear();
            // loading.close()
            editor.activeObject.value?.forceUpdate()
        })
        .catch((err) => {
            console.log(err);
            Toast({
                theme: 'error',
                direction: 'column',
                duration: 3000,
                message: `加载字体【${fontFamilyName}】失败`,
            })
        });
}
const changeTextDecoration = (value) => {
    if (textDecoration.value.modelValue === value) {
        value = 'none'
    }
    textDecoration.value.onChange(value)
}
</script>

<style lang="less">
@boxHeight: 345px;
.text-box,color-box, .font-box {
  //height: 70px;
  margin: 3px 0;
  //overflow-y: hidden;
  //overflow-x: auto;
  overflow-y: auto;
  height: @boxHeight;
}

.color-list-box {
  margin: 5px 0;
  overflow-y: hidden;
  overflow-x: auto;
  padding-bottom: 6px;
  //overflow-y: auto;
  //height: @boxHeight;

  .card {
    display: inline-block;
    //float: left;
    //position: relative;
    margin-top: 5px;
    border-radius: 6px;
    //overflow: hidden;
    box-sizing: border-box;
    border: 1.5px solid #fff;
    max-width: 40px;
    min-width: 40px;

    .t-radio__border {
      height: 0 !important;
    }

    .t-radio__title {
      width: 100%;
    }
  }

  .card--active {
    //border-color: #0052d9;
  }

  .card--active::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    border: 14px solid #0052d9;
    border-radius: var(--td-avatar-round-border-radius, var(--td-radius-default, 6px));
    border-bottom-color: transparent;
    border-right-color: transparent;
  }

  .card__icon {
    display: block;
    color: #fff;
    position: absolute;
    left: 1.5px;
    top: 1.5px;
    z-index: 1;
  }

  /* 横向布局 */

  .horizontal-box {
    width: calc(100% - 32px);
    display: flex;
    align-items: center;
    //margin: 16px;
    .t-radio--block {
      padding: 8px;
    }
  }

  .horizontal-box .card {
    flex: 1;
    margin-left: 12px;
  }

  .horizontal-box .card + .card {
    margin-left: 12px;
  }

  .t-avatar__wrapper {
    border-radius: 50px;
  }

  .t-avatar {
    background-color: transparent;
    width: 40px;
    height: 40px;
  }
}
.color-list-box-break {
  margin: 3px 0;
  //overflow-y: hidden;
  //overflow-x: auto;
  overflow-y: auto;
  height: @boxHeight;

  .card {
    display: inline-block;
    //float: left;
    //position: relative;
    margin-top: 5px;
    border-radius: 6px;
    //overflow: hidden;
    box-sizing: border-box;
    border: 1.5px solid #fff;
    max-width: 40px;
    min-width: 40px;

    .t-radio__border {
      height: 0 !important;
    }

    .t-radio__title {
      width: 100%;
    }
  }

  .card--active {
    //border-color: #0052d9;
  }

  .card--active::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    border: 14px solid #0052d9;
    border-radius: var(--td-avatar-round-border-radius, var(--td-radius-default, 6px));
    border-bottom-color: transparent;
    border-right-color: transparent;
  }

  .card__icon {
    display: block;
    color: #fff;
    position: absolute;
    left: 1.5px;
    top: 1.5px;
    z-index: 1;
  }

  /* 横向布局 */

  .horizontal-box {
    //width: calc(100% - 32px);
    //display: flex;
    //align-items: center;
    //margin: 16px;
    .t-radio--block {
      padding: 8px;
    }
  }

  .horizontal-box .card {
    flex: 1;
    margin-left: 12px;
  }

  .horizontal-box .card + .card {
    margin-left: 12px;
  }

  .t-avatar__wrapper {
    border-radius: 50px;
  }

  .t-avatar {
    background-color: transparent;
    width: 40px;
    height: 40px;
  }
}

.transparent-bg {
  background: var(--td-text-color-anti);
  background-image: linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5), linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5);
  background-size: 6px 6px;
  background-position: 0 0, 3px 3px;
}


.fonts {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  overflow-y: auto;
  padding: 5px;
}

.fonts .font {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  background-color: #f4f4f4;
  //background-color: #797979 !important;
  border: 1px transparent solid;
  width: 21%;
  height: calc(400px * .21);
  margin: 0 2% 5px;
  border-radius: 5px
}

.fonts .font .loading {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(244, 244, 244, .95)
}

.fonts .font .loaded {
  position: absolute;
  bottom: .3125rem;
  right: .3125rem
}

.fonts .font img {
  max-height: 90%;
  max-width: 80%
}

.fonts .active {
  border-color: var(--themeColor)
}

.toolbar-div .flex-box {
  display: flex;
  //background-color: #f8f9fa;
  //border-bottom: 1px solid #dee2e6;
  padding: 5px 16px;
  align-items: center;
  font-size: 20px;
  flex-wrap: wrap;
}

.tag-item {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.separator {
  width: 1px; /* 分隔线的宽度 */
  height: 20px; /* 分隔线的高度，可以根据实际需求调整 */
  background-color: #dee2e6; /* 分隔线的颜色 */
  margin: 0 10px; /* 左右间距 */
}

.tag-item:not(:last-child)::after {
  content: '';
  width: 1px; /* 分隔线的宽度 */
  height: 20px; /* 分隔线的高度，可以根据实际需求调整 */
  background-color: #dee2e6; /* 分隔线的颜色 */
  margin: 0 10px; /* 左右间距 */
}
.color-bar{
  height: 20px;
  border: 1px solid #d3d3d3;
}
</style>
